<template>
    <div class="reply">
        <a-list item-layout="vertical" size="large" :pagination="pagination" :data-source="listData">
            <template #footer>
            <div>
                <b>来自蚂蚁金融科技</b>
                <br>
                蚂蚁金融-让项目更便捷
            </div>
            </template>
            <template #renderItem="{ item }">
            <a-list-item key="item.title">
                <a-list-item-meta :description="item.description">
                    <template #title>
                        <a>{{ item.title }}</a>
                    </template>
                    <template #avatar><a-avatar :src="item.avatar" /></template>
                </a-list-item-meta>
                {{ item.content }}
            </a-list-item>
            </template>
        </a-list>
    </div>
</template>

<script>
import { StarOutlined, LikeOutlined, MessageOutlined } from '@ant-design/icons-vue';
import { defineComponent, onMounted, reactive } from 'vue';
import { getUserMessage } from '@/api/user/index.js'

export default defineComponent({
  components: {
    StarOutlined,
    LikeOutlined,
    MessageOutlined,
  },

  setup() {
    onMounted(() => {
        getUserMessageBorad()
    })
    const listData = reactive([])
    const pagination = {
        pageSize: 3,
    };
    const getUserMessageBorad = () => {
        getUserMessage().then(res => {
            res.data.result.forEach(el => {
                listData.push(el)
            })
        })
    }
    const actions = [{
            type: 'StarOutlined',
            text: '156',
        }, {
            type: 'LikeOutlined',
            text: '156',
        }, {
            type: 'MessageOutlined',
            text: '2',
    }];
    return {
        listData,
        pagination,
        actions,
    };
  },

});
</script>

<style lang="scss" scoped>

</style>
